<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
                                     xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>添加学生</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="/css/zerogrid.css">
    <link rel="stylesheet" href="/css/style.css">

    <script src="/js/jquery-latest.min.js"></script>
    <script src="/js/script.js"></script>


    <!--[if lt IE 8]>
    <div style=' clear: both; text-align:center; position: relative;'>
        <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
            <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
    </div>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="/js/html5.js"></script>
    <script src="/js/css3-mediaqueries.js"></script>
    <![endif]-->

</head>
<body>
<div class="wrap-body">

    <!--////////////////////////////////////Header-->
    <header class="bg-theme">
        <div class="wrap-header zerogrid">
            <div class="row">
                <div id="cssmenu">
                    <ul>
                        <li class='active'><a href="/index">主页</a></li>
                        <li class='active'><a href="/logout">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>


    <!--////////////////////////////////////Container-->

    <button id="showAddFormButton">添加学生</button>

    <div id="addDishForm">
        <button id="closeFormButton" class="close-button">关闭</button>
        <h2>添加学生</h2>
        <form id="dishForm" action="/api/addStudent" method="post">
            <label for="dishName">姓名:</label>
            <input type="text" id="dishName" name="name" required><br>

            <label for="dishDescription">学号:</label>
            <textarea id="dishDescription" name="studentNumber"></textarea><br>

            <label for="dishPrice">性别:</label>
            <input type="text" id="dishPrice" name="gender" required><br>

            <label for="dishQuantity">年龄:</label>
            <input type="number" id="dishQuantity" name="age" required><br>

            <label for="dishClass">班级:</label>
            <input type="text" id="dishClass" name="className" required><br>
            <input type="submit" value="提交">
        </form>
    </div>
    <!--////////////////////////////////////Footer-->
    <footer>
        <div class="zerogrid">
            <div class="wrap-footer">
                <div class="row">
                    <span>Phone / +18836190925 </span></br>
                    <span>Email / 2162408515@qq.com  </span></br>
                    <span>Write by Haluki 2023/5/24 </span></br>
                    <span><strong>如有问题，请联系我们 </strong></span>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    #addDishForm {
        display: none;
        border: 1px solid #ccc;
        padding: 20px;
        max-width: 400px;
        margin: 0 auto;
        background-color: #f8f8f8;
        border-radius: 5px;
    }
    h2 {
        text-align: center;
        color: #333;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="text"],
    input[type="number"],
    textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    .close-button {
        margin-left: 311px;
        background-color: #f44336;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        top: 10px;
        right: 10px;
    }
    .close-button:hover {
        background-color: #d32f2f;
    }
    input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background-color: #45a049;
    }
    #showAddFormButton {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    #showAddFormButton:hover {
        background-color: #45a049;
    }
</style>
    <!-- Google Map -->
    <script>

        document.getElementById('showAddFormButton').addEventListener('click', function () {
            document.getElementById('addDishForm').style.display = 'block';
        });
        document.getElementById('closeFormButton').addEventListener('click', function () {
            document.getElementById('addDishForm').style.display = 'none';
        });

    </script>
</html>